<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理员通告页面</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body class="hold-transition">
<div id="app">


    <center>
        <el-button type="primary" plain @click="studentManage">学生管理</el-button>
        <el-button type="primary" plain @click="helperManage">助手管理</el-button>
        <el-button type="primary" plain @click="checkDormManage">点名管理</el-button>
        <el-button type="primary" plain @click="leaveManage">请假管理</el-button>
        <el-button type="primary" plain @click="noticeManage">通告管理</el-button>
        <el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button>
    </center>
    <center>
        <el-table

                :data="tableData"
                style="width: 50%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="message"
                    label="公告"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="创建时间"
                    width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-sizes="[2, 5, 10, 15]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
    </center>


    <!-- 添加的模块框 -->
    <el-dialog title="添加公告" :visible.sync="dialogFormVisible">
        <el-form :model="form" ref="form">
            <!--            <el-form-item label="公告" :label-width="formLabelWidth">-->
            <!--                <el-input v-model="form.message" autocomplete="off"></el-input>-->
            <!--            </el-form-item>-->
            <el-col :span="24">-->
                <el-form-item label="公告">
                    <el-input v-model="form.message" type="textarea"></el-input>
                </el-form-item>
            </el-col>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveBoard('form')">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 修改的模块框 -->
    <el-dialog title="添加公告" :visible.sync="dialogFormVisible1">
        <el-form >
            <!--            <el-form-item label="公告" :label-width="formLabelWidth">-->
            <!--                <el-input v-model="form.message" autocomplete="off"></el-input>-->
            <!--            </el-form-item>-->
            <el-col :span="24">-->
                <el-form-item label="公告">
                    <el-input v-model="form1.message" type="textarea"></el-input>
                </el-form-item>
            </el-col>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
<!--            <el-button type="primary" @click="updateBoard('form1')">修 改</el-button>-->
            <el-button type="primary" @click="updateBoard">修 改</el-button>
        </div>
    </el-dialog>
</div>

</body>

<!-- 引入组件库 -->

<script src="../js/vue.js"></script>

<script src="../plugins/elementui/index.js"></script>

<script type="text/javascript" src="../js/jquery.min.js"></script>

<script src="../js/axios-0.18.0.js"></script>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            tableData: [],
            dialogFormVisible: false,
            dialogFormVisible1: false,
            form: {
                message: undefined,
                updateTime: undefined
            },
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:2,//每页显示的记录数
                total:0,//总记录数
            },
            form1: {
                id: undefined,
                message: undefined,
                updateTime: undefined
            },
            formLabelWidth: '120px',
        },


        mounted() {
            this.queryBoards();
        },

        methods: {
             updateBoard(){

                 // this.$refs[formName].validate((valid) => {
                    if (1) {
                        console.log(typeof(this.form1.id))
                        axios.put('http://127.0.0.1/board/updateBoard', this.form1)
                            .then((response) => {
                                //console.log("我在这里"+this.form1.message);
                                console.log(response)
                                if (response.data.code == 200) {
                                    //console.log("进入了")
                                    this.form1 = {};
                                    this.dialogFormVisible1 = false;
                                    this.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    });
                                    this.queryBoards();
                                } else {
                                    // this.$message.error(response.data.message);
                                }
                            })
                    } else {
                         console.log('error submit!!');
                         return false;
                     }
             //   });
    },

            queryBoards() {
                axios.get('http://127.0.0.1:80/board/queryBoards',{
                    params:{
                        pageNum: this.pagination.currentPage,
                        pageSize: this.pagination.pageSize,
                    }
                }).then(res => {
                    this.tableData=res.data.data.records;
                    this.pagination.total=res.data.data.total
                        console.log(this.tableData);
                    });
            },

        handleCurrentChange(val){
            this.pagination.currentPage=val;
            this. queryBoards();
        },
        handleSizeChange(val){
            this.pagination.pageSize=val;
            this. queryBoards();
        },


            handleEdit(index, row) {
                // console.log(index, row);
                this.form1.id=parseInt(row.id)
                this.dialogFormVisible1=true;
                axios.get('http://127.0.0.1:80/board/queryById/'+row.id)
                    .then(res => {
                        this.form1.message = res.data.data.message;
                    });
            },
            handleDelete(index, row) {

                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('http://127.0.0.1:80/board/deleteBoard/' + row.id)
                        .then(res => {
                            console.log(res.data);
                            if (res.data.code == 200) {
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.queryBoards();
                            } else {
                                this.$message.error('删除失败');
                            }
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },


            saveBoard(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('http://127.0.0.1:80/board/saveBoard', this.form)
                            .then((response) => {
                                //console.log(response.data);
                                if (response.data.code == 200) {
                                    this.form = {};
                                    this.dialogFormVisible = false;
                                    this.$message({
                                        message: '添加成功',
                                        type: 'success'
                                    });
                                    this.queryBoards();
                                } else {
                                    this.$message.error(response.data.message);
                                }
                            })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

        studentManage(){
            window.location.href="http://localhost:80/xu/pages/students.html"
        },
        helperManage(){
            window.location.href="http://localhost:80/wu/pages/helper.html"
        },
        checkDormManage(){
            window.location.href="http://localhost:80/wu/pages/checkDorm.html"
        },
        leaveManage(){
            window.location.href="http://localhost:80/wu/pages/leaves.html"
        },
        noticeManage(){
            window.location.href="http://localhost:80/xu/pages/board.html"
        }
        }
    })

</script>

</html>